<template>
  <main>
      <div class="topBar">
          <router-link to="/index"><span><img src="../../assets/images/header/向左.png" alt=""></span></router-link>
          <ul class="top_ul">
            <li><router-link to="">商品</router-link></li>
            <li><router-link to="">详情</router-link></li>
          </ul>
          <router-link to="/shoppingCar"><span><img src="../../assets/images/header/购物车.png" alt=""></span></router-link>
      </div>
      <swiper class="swiper" :options="swiperOptionSwiper2">
          <swiper-slide v-for="(item,index) in imgs" :key=index>
            <router-link to="/">
              <img :src="item" alt="">
            </router-link>
          </swiper-slide>
          <div class="swiper-pagination"  slot="pagination"> </div>
      </swiper>
      <div class="details">
        <p class="f_p">先行者 3匹柜式变频空调</p>
        <p class="s_p">KFR-72LW/17EDS21AU1</p>
        <div class="priceTag"><span style="font-size:10px;">参考价&nbsp;&nbsp;￥&nbsp;&nbsp;</span><span style="font-size:16px;">8999</span></div>
        <p class="tips"><span><img src="../../assets/images/showBox/警示 感叹号 ！2.png" alt=""></span>具体成交价格根据商品参加活动或会员使用优惠券、积分等发生变化，最终以各渠道订单结算页价格为准</p>
      </div>
      <footer>
        <div class="foot">
            <ul class="bottomnav">
                <li>
                    <router-link to="/main"><span><img src="../../assets/images/header/首页.png"></span>首页</router-link>
                </li>
                <li>
                    <router-link to="/product"><span><img src="../../assets/images/header/产品.png"></span>产品</router-link>
                </li>
                <li>
                    <router-link to="/"><p style="color:#fff;line-height:30px;">加入购物车</p></router-link>
                </li>
                <li>
                    <router-link to="/"><p style="color:#fff;line-height:30px;">立即购买</p></router-link>
                </li>
            </ul>
        </div>
    </footer>
  </main>
</template>

<style scoped>
body{
  background: rgba(0,0,0,0.1);
}
a{
  text-decoration: none;
}
.topBar{
    display: flex;
    width: 100%;
    height: 30px;
    padding:10px 0;
    border-bottom: 1px solid lightgray;
    background: #fff;
}
.top_ul{
    /* display: inline-block; */
    width: 180px;
    height:30px;
    border: 1px solid #0c5ca8;
    border-radius: 25px;
    margin:0 auto;
}
.top_ul>li{
    float: left;
    line-height: 30px;
    padding: 0px 29px;
}
.topBar>a>span{
  width: 40px;
  line-height: 40px;
  text-align: center;
  margin-left: 10px;
  display: block;
  float: left;
  /* background:pink; */
}
.topBar>a>span>img{
  width:20px;
}
.swiper-container{
  height:325px;
  background: rgba(0,0,0,0.1);
}
.swiper-container-horizontal>.swiper-pagination-bullets{
  bottom:5px;
}
/* .swiper-pagination-bullets>.swiper-pagination-bullet{
  width: 10px;
  height: 10px;
  border: 2px solid #fff;
} */
.details{
  width:92%;
  padding:0 15px;
  /* background: pink; */
  margin-bottom:10px;
}
p{
  word-wrap: break-word;
}
.f_p{
  padding: 10px 0 5px;
  font-weight: 700;
  font-size: 20px;
}
.s_p{
  font-size: 12px;
  color: gray;
}
.tips{
  font-size: 13px;
  color: gray;
  padding-right: 55px;
}
.priceTag{
  padding:10px 0;
}
footer{
  width:96%;
  line-height:60px;
  padding:0 7px;
  /* height:60px; */
  text-align:center;
  position:fixed;
  bottom:0;
  left:0;
  z-index:5;
  background:#fff;
  border-top:1px solid lightgray;
}
.bottomnav{
  width:100%;
  margin-top:10px;
}
.bottomnav>li{
  float: left;
  padding: 0 20px;
  overflow: hidden;
  /* background:pink; */
  position:relative;
  font-size: 16px;
  font-weight: initial;
}
.foot>.bottomnav>li:nth-of-type(1) span,.foot>.bottomnav>li:nth-of-type(2) span{
  position:absolute;
  top:-18px;
  left:28px;
}
.foot>.bottomnav>li:nth-of-type(3),.foot>.bottomnav>li:nth-of-type(4){
  /* display: inline-block; */
  width: 58px;
  height:30px;
  margin-right: 10px;
  background-color:  #0c5ca8;
  border-radius: 25px;
}
.foot>.bottomnav>li:nth-of-type(3),.foot>.bottomnav>li:nth-of-type(4){
  font-size:10px;
}
.bottomnav>li>a{
  color:#0c5ca8;
  text-decoration:none;
}
.productBox{
  width: 100%;
  /* height:375px; */
  background:palegoldenrod;
}
.showBox{
  width:100%;
  height: 300px;
  background: #0c5ca8;
  overflow: hidden;
}
/* .showBox li{
  height: 300px;
  float:left;
} */
.swiper img{
  width:375px;
  height:300px;
}
</style>

<script>
// import swiper from '../../assets/js/index'
// import swiperSlide from '../../assets/js/index'



export default {
  data(){
    return{
      imgs:[
        require('../../assets/images/showBox/xq1.webp'),
        require('../../assets/images/showBox/xq2.webp'),
        require('../../assets/images/showBox/xq3.webp'),
        require('../../assets/images/showBox/xq5.webp'),
        // require('../../assets/images/showBox/xq4.webp')
      ],
      swiperOptionSwiper2:{
                slidesPerView: 1,
                spaceBetween:0,
                pagination:{
                el: '.swiper-pagination',
                clickable:true
               }   
            }
    }

  }

}
</script>
